<template>
  <div>
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="false" title="消息"  />
    <!-- 置顶的系统消息 -->
    <navigator url="/pageZixun/system" class="item system">
      <div class="avatar">
        <image class="img" :src="systemMsg.avatar" mode="widthFix" />
        <div v-show="!systemMsg.see" class="dian"></div>
      </div>
      <div class="msg">
        <div class="title">系统消息</div>
        <div class="content">{{systemMsg.content}}</div>
      </div>
      <div class="time">{{systemMsg.createtime}}</div>
    </navigator>
    <!-- /置顶的系统消息 -->
    <navigator
      :url="'/pageZixun/talk?id=' + item.id"
      class="item"
      v-for="(item, index) in msgList"
      :key="index"
    >
      <div class="avatar">
        <image class="img" :src="item.avatar" mode="widthFix" />
        <div v-show="!item.see" class="dian"></div>
      </div>
      <div class="msg">
        <div class="title">{{item.title}}</div>
        <div class="content">{{item.content}}</div>
      </div>
      <div class="time">{{item.time}}</div>
    </navigator>
  </div>
</template>
<script>
export default {
  data() {
    return {
      systemMsg: {
        id: 0,
        avatar: this.$store.state.imgBaseUrl + "systemMsg.png",
        title: "系统消息",
        content: "",
        see: true
      },
      msgList: [
        // {
        //   id: 0,
        //   avatar: "https://s1.ax1x.com/2020/04/16/Jk7C8O.jpg",
        //   title: "系统消息",
        //   content: "请问有什么可以帮助您的？刘小明，你好，你的咨询已有律师回复",
        //   time: "4/13/20",
        //   see: true
        // },
        // {
        //   id: 1,
        //   avatar: "https://s1.ax1x.com/2020/04/16/Jk7C8O.jpg",
        //   title: "系统消息",
        //   content: "请问有什么可以帮助您的？刘小明，你好，你的咨询已有律师回复",
        //   time: "4/13/20",
        //   see: true
        // }
      ]
    };
  },
  onShow() {
    uni.hideLoading();
    const token = uni.getStorageSync("token");
    const that = this
    if (!token) {
      uni.showModal({
        title: "提示",
        content: '请登录再操作!',
        success: function(res) {
          uni.switchTab({
            url: "/pages/my/my"
          });
        }
      });
      return
    }
    uni.request({
      url: `${that.$store.state.baseUrl}member.info`, 
      data: {
        op: 'getMember'
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Authorization': uni.getStorageSync('token')
      },
      success: (res) => {
        if(res.data.code == 200){

        }else if(res.data.code == -101){
          uni.showModal({
            title: "提示",
            content: '请绑定手机号再操作!',
            success: function(res) {
              uni.switchTab({
                url: "/pages/my/my"
              });
            }
          });
        }else if(res.data.code == -1){
          uni.showModal({
            title: "提示",
            content: '请登录再操作!',
            success: function(res) {
              uni.switchTab({
                url: "/pages/my/my"
              });
            }
          });
        }
      }
    });
    const uid = uni.getStorageSync('uid')
    // store中写好的全局websocket监听事件
    this.$store.dispatch('globalSocket')
    // 一对一聊天
    let data = {
      type: "order_news",
      uid,
      identity: that.$store.state.identity
    };
    this.$store.dispatch("sendMsg", data);
    // 系统消息
    let systemData = {
      type: "system_newest",
      uid,
      identity: that.$store.state.identity,
      page: 1,
      psize: 1
    };
    this.$store.dispatch("sendMsg", systemData);
    uni.onSocketMessage(function(res) {
      const resData = JSON.parse(res.data)
      if(resData.type == 'order_news'){
        console.log(resData);
        // that.msgList = that.msgList.concat(resData.list)
        that.msgList = resData.list
      }else if(resData.type == 'system_newest'){
        console.log(resData);
        resData.avatar = that.$store.state.imgBaseUrl + "systemMsg.png",
        that.systemMsg = resData
      }
    });
    // talk页面中重写了，在全局的时候使用以下监听
    // uni.onSocketOpen(function(res) {
    //   console.log("WebSocket连接已打开！");
    //   // 发送用户信息给服务端
    //   const data = {
    //     type: 'storage_users',
    //     uid: uni.getStorageSync('uid'),
    //     identity: 'buyer'
    //   }
    //   that.$store.dispatch("sendMsg", data);
    //   if(that.platform == 'android'){
    //     clearInterval(that.connectTimer)
    //   }else{
    //     clearTimeout(that.connectTimer)
    //   }
    //   uni.hideLoading();
    // });
  },
  beforeCreate() {
    uni.showLoading({
      title: "加载中"
    });
  },
  mounted() {
    uni.hideLoading();
  }
};
</script>
<style lang='less' scoped>
// 引入工具less
@import "@/common/util.less";
.item {
  .flex();
  align-items: start;
  padding: 18rpx 25rpx;
  border-bottom: 1px solid #e5e5e5;
  .avatar {
    position: relative;
    width: 100rpx;
    .img {
      border-radius: 50%;
    }
    .dian{
      position: absolute;
      top: 0rpx;
      right: 0rpx;
      width: 25rpx;
      height: 25rpx;
      border-radius: 50%;
      // background-color: #ff3b30;
      background-color: #fa5151;
    }
  }
  .msg {
    width: calc(100% - 120rpx - 20%);
    padding: 0 10rpx;
    .title {
      font-size: 30rpx;
      color: #6c76a7;
      margin-bottom: 23rpx;
    }
    .content {
      display: -moz-box; /* Mozilla */
      display: -webkit-box; /* WebKit */
      display: box; /* As specified */
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word; /*单词断句*/
      -webkit-line-clamp: 1; /*第几行省略*/
      -webkit-box-orient: vertical; /*水平布局*/
      -moz-box-orient: vertical; /* Mozilla */
      box-orient: vertical; /* As specified */
      font-size: 24rpx;
      color: @font-color;
    }
  }
  .time {
    width: 20%;
    font-size: 24rpx;
    color: @font-color;
    text-align: right;
  }
}
.system {
  background-color: #f4f5fa;
}
</style>